<template>
  <h2>App父级组件：Suspense组件的使用</h2>
  <Suspense>
    <template #default>
      <!-- 异步组件 -->
      <AsyncComponent />
    </template>
    <template v-slot:fallback>
      <!-- 准备的内容 -->
      <h2>Loading</h2>
    </template>
  </Suspense>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'
// 引入组件：静态引入和动态引入

// Vue2中的动态引入组件的方法：(在Vue3中这种写法不行)
// const AsyncComponent = () => import('./AsyncComponent.vue')
// Vue3中的动态引入组件的写法
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
export default defineComponent({
  name: 'App',
  components: {
    AsyncComponent
  }
})
</script>
